<template>
  <div>
    <Table
      ref="tableRef"
      :url="URL_PAGINGUSERACTIVITY"
      :columns="data.columns"
      :handles="data.handles"
      :toolbar="data.toolbar"
      :query="data.query"
      :params="{ type: 2 }"
    ></Table>
    <DialogStop ref="dialogStopRef" :type="2" @get-data="getData"></DialogStop>
  </div>
</template>


<script lang="ts" setup name="rechangeActivityList">
import Table from '@/components/table/index.vue';
import DialogStop from '../dialogStop.vue';
import { URL_PAGINGUSERACTIVITY } from '@/service/apis/market';
import { queryDicByParent } from '@/service/apis/api';

const router = useRouter();

const tableRef = ref();
const dialogStopRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

queryDicByParent({
  listDtos: ['userActivityStatus'],
}).then((res: any) => {
  if (res) {
    data.columns[1].dic = res.userActivityStatus;
    data.query[1].props.options = res.userActivityStatus;
  }
});

const data = reactive({
  columns: [
    {
      prop: 'name',
      label: '活动名称',
    },
    {
      prop: 'status',
      label: '活动状态',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'introduce',
      label: '活动说明',
    },
    {
      prop: 'startTime',
      label: '活动开始日期',
    },
    {
      prop: 'endTime',
      label: '活动结束日期',
    },
    {
      prop: 'participantsCount',
      label: '参与用户数',
      dataType: String,
    },
    {
      prop: 'reason',
      label: '终止原因',
    },
    {
      prop: 'updateBy',
      label: '修改人',
    },
    {
      prop: 'updateTime',
      label: '修改时间',
    },
  ],
  handles: [
    {
      label: '详情',
      handle: (row: any) => {
        console.log('详情 ---', row);
        router.push({
          name: 'rechangeActivityDetail',
          query: { id: row.id },
        });
      },
    },
    {
      label: '修改',
      permission: 'rechangeActivityList.edit',
      disabledFun: (row: any) => {
        return row.status !== 0;
      },
      handle: (row: any) => {
        console.log('编辑---', row);
        router.push({
          name: 'rechangeActivityEdit',
          query: { id: row.id },
        });
      },
    },
    {
      label: '终止',
      color: '#FA3939',
      permission: 'rechangeActivityList.stop',
      disabledFun: (row: any) => {
        return row.status !== 0 && row.status !== 1;
      },
      handle: (row: any) => {
        dialogStopRef.value?.show(row);
      },
    },
  ],
  toolbar: [
    {
      label: '新增',
      permission: 'rechangeActivityList.add',
      icon: 'icon-add',
      type: 'primary',
      handle: (row: any) => {
        router.push({
          name: 'rechangeActivityAdd',
        });
      },
    },
  ],
  query: [
    {
      label: '活动名称',
      prop: 'name',
      comName: 'input',
      props: {
        placeholder: '请输入活动名称',
      },
    },
    {
      label: '活动状态',
      prop: 'status',
      comName: 'select',
      props: {
        placeholder: '请选择活动状态',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '活动开始日期',
      prop: 'startTime',
      comName: 'date',
      keys: ['startStartTime', 'endStartTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '活动结束日期',
      prop: 'endTime',
      comName: 'date',
      keys: ['startEndTime', 'endEndTime'],
      props: {
        type: 'daterange',
      },
    },
  ],
});

const getData = () => {
  tableRef.value?.getData();
};
</script>